<template>
	<view class="coupon">
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">我的优惠券</block>
	</cu-custom>		
	<view class="contain" v-if="list.length">
		<view class="list">
			<view class="item" v-for="i in list" :key="i.coupon_id">
				<view class="amount">
					<view>
						<text class="yen">&yen;</text>
						<text class="money">{{ i.Money }}</text>								
					</view>
					<view class="dsc">{{ i.NeedMoney }}</view>
				</view>
				<view class="desc">
					<view class="h"><text>{{ i.c_content }}</text>{{ i.p_content }}</view>
					<view class="time">
						<view class="s">{{ i.startline }} - {{ i.deadline }}</view>
					</view>							
				</view>
			</view>				
		</view>
	</view>
	<empty-data v-if="!list.length">没有发现优惠券~</empty-data>
	</view>
</template>

<script>
	import { UserCoupon } from '@/common/api/users'
	export default {
		name: 'mycoupon',
		data () {
			return {
				list: [],
				params: {
					op: 'use',
					coupon_type: 0
				}				
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList () {
				UserCoupon(this.params).then(res => {
					const list = res.coupon
					if (list.length) {
						this.list = list.map(item => {
							+item.NeedMoney < 0 ? item.NeedMoney = '不限金额' : item.NeedMoney = `满${item.NeedMoney}可使用`
							return item
						})
					} else {
						this.list = list
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../common/styles/variables.less';	
.coupon {
	.contain {
		background-color:white;
		display: flex;
		flex-direction: column;
		flex-flow: column;
		justify-content: space-between;
		.list {
			flex:1;
			overflow: hidden;
			padding: 15upx 0;			
			.item {
				margin: 0 15upx 20upx;
				color: #53c7ca;
				padding: 0 20upx;
				border-top: 12upx solid currentColor;
				box-shadow: 0 0 12upx 0 rgba(0,0,0,.1);
				border-radius: 12upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				min-height: 200upx;
				&:last-of-type { margin-bottom: 0 }
				.amount {
					width: 200upx;
					display: flex;
					justify-content: center;
					flex-flow: column;
					flex-direction: column;
					align-items: center;
					.yen { font-size:@minSize; }
					.money { font-size: 60upx;font-weight: bold; letter-spacing:0 }
					.dsc { font-size: 26upx; }
				}
				.desc {
					flex: 1;
					.h {
						font-size:@minSize;
						.twoLine(2);
						height: 72upx;
						line-height: 36upx;
						text {
							background-color: #53c7ca;
							color: white;
							font-size: @minSize;
							position: relative;
							display: inline-block;
							padding: 0 14upx 0 24upx;
							height: 30upx;
							margin-right: 8upx;
							line-height: 30upx;
							position: relative;
							border-radius: 0 8upx 8upx 0;
							&::before {
								position: absolute;
								z-index: 1;
								content: "";
								width: 0;
								top: 0;
								left: -16upx;
								height: 0;
								border-top: 16upx solid white;
								border-right: 16upx solid transparent;
								border-bottom: 16upx solid white;
								border-left: 16upx solid white;									
							}
							&::after {
								content: ".";
								position: absolute;
								color: #fff;
								left: 10upx;
								top: -12upx;
								font-size: 40upx;									
							}
						}
					}
					.time {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.s {
							font-size:@minSize;
							color:#999;
							.twoLine(1);
						}
						.b {
							color:white;
							background-color:#53c7ca;
							font-size:@minSize;
							padding: 4upx 40upx;
							border-radius: 40upx;
							white-space: nowrap;
							&.act {
								border:2upx solid #999;
								color:#999;
								background-color:white;
							}
						}
					}
				}
			}
		}
	}	
}	
</style>
